<template>
  <a-modal
    title="成品详情"
    :visible="visible"
    :width="800"
    okText="确定"
    cancelText="取消"
    :confirm-loading="confirmLoading"
    @ok="handleOk"
    @cancel="clearAll"
  >
    <a-descriptions bordered style="margin-bottom: 20px">
      <a-descriptions-item label="成品名称">
        {{ info.productName }}
      </a-descriptions-item>
      <a-descriptions-item label="成品图片">
        <img :src="info.productImage" style="width: 200px; height: 100px" />
      </a-descriptions-item>
      <a-descriptions-item label="成品价格">
        {{ info.productPrice }}
      </a-descriptions-item>
    </a-descriptions>
    <div>物料信息</div>
    <a-descriptions
      bordered
      style="margin-top: 10px"
      v-for="(item, index) in info.srProductMapList"
      :key="index"
    >
      <a-descriptions-item label="物料名称">
        {{ item.originalProductInfo.productName }}
      </a-descriptions-item>
      <a-descriptions-item label="物料图片">
        <img
          :src="item.originalProductInfo.productImage"
          style="width: 50px; height: 50px"
        />
      </a-descriptions-item>
      <a-descriptions-item label="物料数量">
        {{ item.productNum }}
      </a-descriptions-item>
    </a-descriptions>
  </a-modal>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      info: {},
    }
  },
  created() {
    console.log(this.$route)
  },
  methods: {
    clearAll() {
      this.visible = false
    },
  },
}
</script>